<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：
        局部指令： new vue({
            directives:{指令名：配置对象}
        })
    或  new Vue({
            directives{指令名：回调函数}
        })
    -->
    <div id="demo">
        <h2>{{name}}</h2>
        <h2>当前N的值是<span v-text="n"></span></h2>
        <h2>放大后N的值是<span v-big="n"></span></h2>
        <button @click="n++">猛击</button>
        <input type="text" v-fbind:value = 'n'>
        
    </div>
    <script type="text/javascript">
    Vue.config.productionTip = false //关闭生产提示
    // Vue.directive('fbind',{  全局写法
    //     bind(e,b){
    //         e.value = b.value
    //     },
    //     inserted(e,b){//指令所在元素被插入页面时
    //         e.focus()
    //     },
    //     update(e,b){//指令所在模板被重新解析时
    //         e.value = b.value
    //         e.focus()
    //     }
    // })
    new Vue({
        el:"#demo",
        data:{
            name:"test",
            n:1
        },
        directives:{//局部自定义
            //函数式写法
            big(ele,bind){
                ele.innerText = bind.value*10
            },
            fbind:{//这三个回调函数名是固定的，bind、inserted、update
                bind(e,b){
                    e.value = b.value
                },
                inserted(e,b){//指令所在元素被插入页面时
                    e.focus()
                },
                update(e,b){//指令所在模板被重新解析时
                    e.value = b.value
                    e.focus()
                }
            }
        }
    })
    </script>
</body>
</html>